import { FC, useState, useEffect } from "react";
import AUpload from "../../compent/AUpload"
import AForm from "../../compent/AForm";
import { AformConfig } from "./config/index"
import { Find, comment, FileCharge } from "../../untils/api"
import { Card, Pagination } from 'antd';
import style from "./index.module.scss"
import type { PaginationProps } from 'antd';

const { Meta } = Card;

const File: FC<{}> = () => {
    const [pageSizes, setPageSize] = useState(10)
    const [page, setPage] = useState(1)
    const [total, settotal] = useState(0)
    const [data, setData] = useState([])
    const [fromobj, setFeomObj] = useState<object>({})
    const submit = (data: any) => {
        // console.log(data)
        // setFeomObj(data)
        // //调用接口
        // // getList(page, pageSizes, data)
        // FileCharge.getFileList(data).then(res => {
        //     console.log(res.data)

        // })
        // getList(page)
        console.log(data)
        setFeomObj(data)
        //调用接口
        getList(page, pageSizes, data)
    }
    useEffect(() => {
        getList(page)
    }, [])
    const onPageSize = (pageNumber: number, pageSize: number) => {
        console.log(pageNumber, pageSize, "从子组件获取")
        setPage(pageNumber)
        setPageSize(pageSize)
        getList(pageNumber, pageSize)
    }
    const getList = (page: number, pageSize: number = pageSizes, Fromobj: object = fromobj) => {
        const params = {
            page,
            pageSize: pageSize,
            ...Fromobj
        }
        console.log(params)
        FileCharge.getFileList(params).then(res => {
            console.log(res.data)
            console.log(res.data.data[0], "文件管理数据")
            //列表
            setData(res.data.data[0])
            //总数据
            settotal(res.data.data[1])
        })
    }
    const onResetFields = () => {
        // setFeomObj({}),
        getList(page, pageSizes, {})
    }
    //分页
    const onChange: PaginationProps['onChange'] = (pageNumber,pageSize) => {
        console.log( pageNumber,pageSize);
        onchangPage(pageNumber,pageSize)
    };
    //分页
    const onchangPage=(pageNumber:number,pageSize:number)=>{
        setPage(pageNumber)
        setPageSize(pageSize)
        getList(pageNumber)

    }
    return (
        <div className={style["file-wrap"]}>
            <AUpload></AUpload>
            <AForm
                onsubmit={submit}
                AformConfig={AformConfig}
                onResetFields={onResetFields}
            ></AForm>
            <div>
                <Card >
                    <div className={style["file-car"]}>
                        {
                            data && data.map((item, index) => {
                                return <Card
                                    hoverable
                                    style={{ width: 240 }}
                                    cover={<img className={style["file-img"]} alt="example" src={(item as any).url} />}
                                >
                                    <Meta title={(item as any).originalname} description={"上传于" + (item as any).filename} />
                                </Card>
                            })
                        }
                    </div>
                </Card>
                
            </div>
            <Pagination
                    showSizeChanger
                    // onShowSizeChange={onShowSizeChange}
                    onChange={onChange}
                    defaultCurrent={3}
                    total={total}
                />
        </div>
    )
}

export default File